<!-- 角色管理 -->
<template>
	<div class="roleManage">
		<div class="top">
			<el-form ref="form" :model="form" label-width="120px">
				<el-row>
					<el-col :span="8">
						<el-form-item label="角色名称">
							<el-input v-model.trim="form.arName" @keyup.enter.native="search" @change="resetPage"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="角色编码">
							<el-input v-model.trim="form.arCode" @keyup.enter.native="search" @change="resetPage"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<div class="btndiv">
							<el-button v-blur class="query" @click="search">查询</el-button>
							<el-button v-blur class="reset" @click="reset">重置</el-button>
							<el-button v-blur class="added" @click="add">新增</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div class="tableDiv">
			<el-table stripe :data="tableData" style="border-radius: 6px" :header-cell-style="{color:'#333333',fontFamily:'PingFang SC',fontSize:'14px',fontWeight:500,background: '#F4F8FF',
			borderBottom: '1px solid #B9DAF2'}">
				<el-table-column type="index" label="序号" width='55px'></el-table-column>
				<el-table-column prop="arName" label="角色名称"></el-table-column>
				<el-table-column prop="arCode" label="角色编码"></el-table-column>
				<el-table-column prop="arRemark" label="角色描述"></el-table-column>
				<el-table-column prop="arCreateTime" label="创建时间"></el-table-column>
				<el-table-column prop="operation" label="操作">
					<template slot-scope="scope">
						<el-button v-blur @click="handleConfigure(scope.$index, scope.row,$event)" type="success" plain
							size="mini">
							用户配置
						</el-button>
						<el-button v-blur @click="handleModify(scope.$index, scope.row,$event)" type="warning" plain
							size="mini">
							修改
						</el-button>
						<el-button v-blur @click="handleDelete(scope.$index, scope.row,$event)" type="danger" plain
							size="mini">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="pagediv">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
				:page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="recordsFiltered">
			</el-pagination>
		</div>
		<newlyRoleManage ref='newlyRoleManage'></newlyRoleManage>
		<roleManageConfig ref='roleManageConfig'></roleManageConfig>
	</div>
</template>

<script>
	import api from '@/api/systemManagement/RolesPermissions/roleManage.js'
	import roleManageConfig from './roleManageConfig'
	import newlyRoleManage from './newlyRoleManage'
	import '@/assets/queryPublic.css'
	export default {
		name: 'roleManage',
		components: {
			newlyRoleManage,
			roleManageConfig
		},
		data() {
			return {
				pageNum: 1,
				pageSize: 10,
				recordsFiltered: 0,
				form: {
					"arName": '',
					"arCode": '',
				},
				tableData: [],
			}
		},
		mounted() {
			this.GetList()
		},
		methods: {
			resetPage() {
				this.pageNum = 1;
			},
			search() {
				this.GetList()
			},
			reset() {
				this.pageNum = 1;
				this.form.arName = ""
				this.form.arCode = ""
				this.GetList()
			},
			add() {
				this.$refs.newlyRoleManage.show()
			},
			GetList() {
				const data = {
					"pageNum": this.pageNum,
					"pageSize": this.pageSize,
					"param": this.form
				}
				api.querySysRoleList(data).then(res => {
					this.tableData = res.data.data;
					this.recordsFiltered = res.data.recordsFiltered;
				})
			},
			handleDelete(i, r, e) {
				this.$confirm('此操作将永久删除, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					api.deleteSysRoleByid(r.arId).then(res => {
						if (res.data && res.data.code == 200) {
							this.$message.success('删除成功');
							this.GetList()
						} else {
							this.$message.error('删除失败')
						}
					})
				})
			},
			handleModify(i, r, e) {
				this.$refs.newlyRoleManage.show(r)
			},
			//用户配置
			handleConfigure(i, r, e) {
				this.$refs.roleManageConfig.show(r)
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.pageNum = 1;
				this.GetList()
			},
			handleCurrentChange(val) {
				this.pageNum = val;
				this.GetList()
			},
		}
	}
</script>

<style scoped lang='scss'>

</style>
